Aquarium tide.
A glanceable command surface for AI coding agents — warm sand on deep ink, kelp greens for the calm signal, coral for the developer's edge.
01 · COLOR
The palette is warm-sided.
Whites lean into sand, blacks lean into deep aquarium green. Pure neutrals are forbidden. Kelp signals "App Store / running / OK"; coral signals the developer tier; amber is the only color that pulses, and only when the agent is waiting on you.
Tide — sand / paper
Ink — deep aquarium
Kelp · Coral · Amber — signals
Two surfaces, two palettes
The tokens above are for marketing / editorial surfaces. Inside the product itself — menubar, e-ink, terminal, hardware — we run a brighter signal palette so status reads at 16px on glossy OS chrome. Marketing must never use product brights.
02 · TYPE
Two faces, one rhythm.
IBM Plex Sans for everything human — including Korean and Japanese, via the Plex multi-script family. JetBrains Mono for everything the machine emits, plus all kickers, tier badges, timestamps and commands. No third face.
Run agents, calmly.
Two tiers, one surface.
Glanceable status without a tab switch.
AgentDeck routes Claude Code, Codex CLI, OpenClaw and OpenCode through a single deck. The agents do the work; you keep your attention.
Each row in the comparison checklist runs at this size with a hairline rule between. Tight but never cramped.
Open Source · Independent
App Store
Developer
CLI
npx @agentdeck/setup
03 · MULTILINGUAL
Asia-first stack.
KO, EN and JA share one type system via the IBM Plex Sans family + KR + JP scripts. Korean copy uses ~해요 체 (relaxed but precise). Japanese uses です/ます. Mono kickers translate, tier badges do not.
KO
에이전트를 차분하게 실행하세요. — hero subtitle
EN
Run agents, calmly. — hero subtitle
JA
エージェントを、静かに動かす。 — hero subtitle
04 · SPACING
4px base, 14 stops.
Section vertical padding is 96px desktop, 64px mobile. Container max-width is 1240px with 32px gutters.
4
8
12
16
20
24
32
40
48
56
64
80
96
120
05 · RADII
Soft, never cute.
Mono badges hold a 4px radius for crispness; cards open up to 16–18px. The hero pill and lang switch use full pills.
sm · 4
md · 8
lg · 10
xl · 12
2xl · 14
3xl · 16
pill
06 · SHADOWS
Warm, soft, subtle.
All shadows tilt warm — they're built on the ink-900 hue, not pure neutral grey, so they sit naturally against the sand backgrounds.
sh-card
sh-card-hover
sh-frame
sh-canvas
07 · STATUS SEMANTICS
One thing pulses, and only one.
Idle is silent. Processing is steady. Awaiting pulses amber. Error is solid coral. Anything outside this matrix is decoration and should be reconsidered.
| State | Dot | Color | Animation | Meaning |
|---|---|---|---|---|
| idle | --ink-300 | none | Session exists, nothing happening. | |
| processing | --kelp-500 | none — steady | Agent is actively working. | |
| awaiting | --amber-500 | pulse 1.1s | Agent needs YES/NO from you. | |
| error | --coral-500 | none | Failed run, attention required. |
08 · COMPONENTS
The working set.
Everything below is a class in design/components.css. Variants extend a base via BEM-ish modifiers (--primary, --ghost).
.ad-btn
.ad-tier
App Store
Developer
CLI
.ad-tier on ink
App Store
Developer
.ad-chip
Open · independent · 2026
.ad-dot
idle
processing
awaiting
error
.ad-lang
.ad-notice
codex · gpt-5.4 is editing
main.zig.claude-code is asking permission to delete 3 files.
opencode failed: rate limit until 12:42.
.ad-code
npx @agentdeck/setup
agentdeck route claude-code → tablet
.ad-placeholder
09 · ICONS
Drawn for the system.
All 24px viewbox, 1.6px stroke, currentColor. Live in design/icons.jsx. Build new icons in this system; never grab from a generic icon font.
10 · BRAND MARKS
One product, four agents.
The product mark is the AgentDeck aquarium icon — a full-color illustration that ships with the App Store build and lives in the Dock. The agent marks are the real brand SVGs of each upstream tool (Claude Code, Codex, OpenClaw, OpenCode), used wherever a session is identified. We do not redraw or stylize them; they keep their own brand color from data.js → AGENTS.
Product mark · App Store icon
96 · 64 · 40 · 24
AgentDeck — the aquarium.
Full-color illustration. Used at 1024² for the App Store, 512² / 256² / 128² in the Dock and bundle, and as the splash on every hardware surface during pairing. Ships in the bundle as AppIcon.icns; PNG export lives at design/brand/agentdeck-icon.png.
96 · 64 · 40 · 24
Agent marks — used at session level, in menubar V3/V4, on hardware tiles
Source SVGs in design/brand/*.svg; tinted at runtime via currentColor in creatures.jsx. Brand colors come from data.js and are the only saturated reds/blues allowed in the system.
11 · HARDWARE SURFACES
Build for the panel.
AgentDeck runs on real surfaces with real pixel grids. Treat each as a constraint to celebrate, not work around.
12 · DON'TS
Keep it honest.
A short list of things that look like good ideas but break the system.
No pure neutralsDon't use
#fff or #000. Use --tide-50 and --ink-900.No third typefacePlex Sans + JetBrains Mono. Display fonts for headers are forbidden.
No animated kelp/coralOnly amber pulses. If you're tempted to animate kelp, stop.
No drawn hardwareReal photography or the placeholder pattern. Never a hand-drawn SVG of a device.
No emoji in product UIUse the icon set or creature marks. Emoji is for chat, not chrome.
No background gradientsOne exception: the radial glow under the hero visual.
No centered long copyThe lede stays left-aligned, max 60ch.
No drop shadows on textType carries its own weight. Shadows are for cards.